<template>
  <view>
    <nav-bar page-title="用户协议"/>
    <view class="margin-30">
      <u-parse :content="text" :tagStyle="style"></u-parse>

      <!-- 同意 取消-->
      <view class="margin-top-40 flex-between">
        <view class="button">
          <view class="center color-grey bg-white text-32 button-cancel" @click="navigateBack">返回</view>
        </view>

        <view class="button">
          <view class="center text-32 button-agree">同意
            <button class="service" open-type="getPhoneNumber" @getphonenumber="getPhoneAndConfirm"/>
          </view>
        </view>
      </view>
      <view style="height: 100rpx;"/>
    </view>
  </view>
</template>

<script>
import NavBar from "@/components/nav-bar/nav-bar.vue";
import {updateUserPhone} from "@/services/api";

export default {
  components: {NavBar},
  data() {
    return {
      style: {
        // 字符串的形式
        p: 'font-size:32rpx'
      },
      text: '<div style="text-align: center;font-size: 24px;">请仔细阅读以下条款和条件:</div>\n' +
          '<p style="text-align: justify;">新疆吾孜哈思电子科技有限公司（以下简称&ldquo;腾飞&rdquo;）依据下列条款和条件提供本及软件服务（以下简称&ldquo;服务&rdquo;）。请仔细阅读以下条款和条件。如果您不能接受这些条款和条件，则请不要使用本软件或服务。严禁非法使用本软件上的任何商标或内容；如您未满 18 周岁，请您在法定监护人陪同下仔细阅读并充分理解本协议，并征得法定监护人的同意后使用本产品及相关服务。您应对运用服务项目发送的任何内容负责。腾飞对您运用本软件和服务而实施的任何非法行为不承担任何责任。</p>\n' +
          '<p style="text-align: justify;">您明确同意：</p>\n' +
          '<p style="text-align: justify;">&nbsp;</p>\n' +
          '<p style="text-align: justify;">(1) 您不会将本软件用于任何法律、法规、公共秩序和道德禁止的任何目的，或促使实施任何违反法律、法规、公共秩序和道德的行为；</p>\n' +
          '<p style="text-align: justify;">(2) 使用或试图使用任何&ldquo;深层链接&rdquo;、&ldquo;抓取工具&rdquo;、&ldquo;遥控装置&rdquo;、&ldquo;网络机器人&rdquo;、&ldquo;网络爬虫&rdquo;、&ldquo;数据挖掘技术&rdquo;、&ldquo;计算机代码&rdquo;或任何其他自动设备、程序、工具、运算法则、流程或方法或具有类似流程或功能的人工处理方法，或未经事先明确书面同意，访问、获取、复制或监控本软件的任何部分或通过本软件查询或取得的任何数据或内容；</p>\n' +
          '<p style="text-align: justify;">(3) 以任何方式获取或试图获取本软件无意通过公开展示或可视链接的方式公开的任何资料或信息；</p>\n' +
          '<p style="text-align: justify;">(4) 以任何方式设置旁路或采取任何其他措施限制或阻止访问本软件或本软件上的任何内容；</p>\n' +
          '<p style="text-align: justify;">(5) 违反本软件的安全政策或试图通过黑客、密码破译或任何其他手段非法访问本软件、数据、资料、信息、计算机系统或与本软件关联服务器相连接的网络；</p>\n' +
          '<p style="text-align: justify;">(6) 干扰或试图干扰本软件的适当运行或干扰通过本软件实施的任何活动，包括在本软件公布之前访问任何数据、内容或其他信息；</p>\n' +
          '<p style="text-align: justify;">(7) 采取或试图采取本软件经营者认为将会或可能会对本软件或基础设备产生不合理或不适当的超大负荷或负担的措施；</p>\n' +
          '<p style="text-align: justify;">(8) 侵犯其他人员、第三方或腾飞的财产权、知识产权、隐私权或其他权利；</p>\n' +
          '<p style="text-align: justify;">(9) 运用本软件或服务实施竞选、招揽、游说、传教或类似行为；</p>\n' +
          '<p style="text-align: justify;">(10) 运用本软件或服务实施大规模杀伤性武器的开发和制造行为、恐怖主义行为以及其他军事行为；</p>\n' +
          '<p style="text-align: justify;">(11) 运用本软件或服务发送淫秽图片、儿童色情图片、虐待儿童图片或类似信息；</p>\n' +
          '<p style="text-align: justify;">(12) 将本软件或服务用于犯罪行为，如赌博、妨碍商业行为和欺诈；</p>\n' +
          '<p style="text-align: justify;">(13) 将本软件或服务用于跟踪或类似行为；</p>\n' +
          '<p style="text-align: justify;">(14) 运用本软件或服务发送鼓吹战争、种族歧视、宗教迫害、走私人口、卖淫、暴力、野蛮和吸毒行为的信息；</p>\n' +
          '<p style="text-align: justify;">(15) 运用本软件或服务向公众发送虚假信息；</p>\n' +
          '<p style="text-align: justify;">(16) 违反本条款和条件；</p>\n' +
          '<p style="text-align: justify;">(17) 鼓励实施上述各项规定的行为以及腾飞认为属于上述各项规定项下的行为；以及运用本软件或服务实施腾飞认为不当的其他行为</p>\n' +
          '<p style="text-align: justify;">(18) 您不得将本软件和服务用于任何非法目的。您未经授权而使用本软件和服务的行为，将导致您访问并使用本软件和服务的权限的丧失。</p>\n' +
          '<p style="text-align: center;">更新日期：2024 年 03 月 04 日</p>\n' +
          '<p style="text-align: center;">生效日期：2024 年 03 月 04 日</p>'
    };
  },
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    },
    // 同意
    async getPhoneAndConfirm(e) {
      const {code, errMsg} = e.detail
      if (errMsg === "getPhoneNumber:ok") {
        const resPhone = await updateUserPhone(code)
        if (resPhone.code === 200) {
          this.$store.commit('setUserInfo', resPhone)
          uni.navigateBack()
        }
      }
    },
  }
}
</script>

<style lang="scss">
.button {
  width: 40%;
}

.button-cancel {
  height: 94rpx;
  border-radius: 8rpx;
  border: solid 2rpx #ebedf0;
}

.button-agree {
  position: relative;
  background-color: #0E81FC;
  height: 94rpx;
  color: white;
  border-radius: 8rpx;
}
</style>
